<!-- Navigator for BeiMingYouyu -->
<template>
  <div id="Navigator">
    <transition name="fadeDown">
      <div id="Navigator-bar" v-if="barShow">
        <div class="nav-left">
          <span class="title">北冥有鱼</span>
        </div>
        <div class="nav-right">
          <svg @click="barShow=false" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4703">
            <path d="M511.5 374.5c-8.2 0-16.4 3.1-22.6 9.4L273.4 599.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l192.9-192.9 192.9 192.9c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L534.1 383.9c-6.2-6.3-14.4-9.4-22.6-9.4z" p-id="4704"></path>
          </svg>
          <svg @click="onFullTiggle" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2465">
            <!-- <path v-if="isFullScreen" d="M892.2332 989.237563H134.437748C82.422427 989.237563 40.104334 946.91947 40.104334 894.904149V137.108697c0-52.015321 42.318093-94.333414 94.333414-94.333414h757.795452c52.015321 0 94.341435 42.318093 94.341436 94.333414v757.795452c-0.008021 52.015321-42.326114 94.333414-94.341436 94.333414z m-757.795452-882.295346A30.206584 30.206584 0 0 0 104.271268 137.108697v757.795452a30.214605 30.214605 0 0 0 30.16648 30.174501h757.795452a30.214605 30.214605 0 0 0 30.174501-30.174501V137.108697a30.206584 30.206584 0 0 0-30.174501-30.16648H134.437748zM603.040848 406.096485c0.128334 0.625628 0.232605 1.259276 0.417086 1.884904 0.176459 0.665732 0.401043 1.307401 0.64969 1.933029 0.128334 0.360939 0.200522 0.721878 0.344897 1.066775 0.080209 0.18448 0.18448 0.336876 0.248647 0.521357 0.288751 0.64969 0.625628 1.267297 0.962504 1.892924 0.272709 0.497294 0.521356 0.994587 0.850212 1.483861 0.344897 0.569482 0.770003 1.098859 1.171046 1.652298 0.336876 0.46521 0.665732 0.914379 1.026671 1.363547 0.473231 0.521356 0.938441 1.002608 1.451777 1.483861 0.401043 0.385002 0.778024 0.802087 1.171047 1.138963 0.561461 0.473231 1.138963 0.882295 1.708444 1.307401 0.417085 0.320835 0.842191 0.641669 1.315422 0.930421 0.577502 0.401043 1.20313 0.729899 1.836779 1.058754 0.505315 0.256668 0.978546 0.521356 1.491881 0.73792 0.232605 0.104271 0.449169 0.248647 0.657711 0.360939 0.449169 0.160417 0.874274 0.272709 1.315422 0.401043 0.529377 0.200522 1.066775 0.36896 1.612195 0.537398 0.673753 0.192501 1.379589 0.328856 2.053342 0.465211 0.561461 0.104271 1.1149 0.224584 1.660319 0.272709 0.73792 0.104271 1.475839 0.144376 2.205738 0.160417 0.336876 0.024063 0.673753 0.072188 1.01865 0.096251h170.274981a25.714899 25.714899 0 1 0 0-51.437819H690.275796l168.430181-168.430182a25.618649 25.618649 0 0 0 7.074405-23.092075 25.466252 25.466252 0 0 0-7.058363-13.298597 25.618649 25.618649 0 0 0-18.191326-7.515552 25.586565 25.586565 0 0 0-18.207367 7.523573l0.00802 0.016041-168.42216 168.438203V230.856588a25.730941 25.730941 0 0 0-51.461882 0l0.008021 170.283002c0 0.360939 0.080209 0.705836 0.080209 1.074796 0.032083 0.713857 0.080209 1.419693 0.168438 2.109488 0.08823 0.601565 0.200522 1.187088 0.336876 1.772611zM423.6301 625.924381c-0.120313-0.625628-0.232605-1.267297-0.417085-1.884903a17.084446 17.084446 0 0 0-0.64969-1.933029c-0.120313-0.360939-0.208543-0.721878-0.344897-1.066775-0.080209-0.18448-0.192501-0.336876-0.248647-0.521357-0.288751-0.64969-0.625628-1.259276-0.962504-1.884904-0.28073-0.505315-0.529377-1.002608-0.850212-1.491881-0.352918-0.561461-0.770003-1.098859-1.171047-1.652298a33.639515 33.639515 0 0 0-1.026671-1.363548 25.345939 25.345939 0 0 0-1.451777-1.48386c-0.393022-0.393022-0.770003-0.810108-1.171046-1.146984-0.55344-0.473231-1.130942-0.874274-1.700424-1.29938a19.755395 19.755395 0 0 0-3.1522-1.989175c-0.505315-0.264689-0.978546-0.521356-1.491882-0.745941-0.224584-0.104271-0.441148-0.240626-0.657711-0.360939-0.441148-0.168438-0.874274-0.272709-1.307401-0.401043a27.367197 27.367197 0 0 0-1.620215-0.537398c-0.673753-0.192501-1.379589-0.328856-2.053342-0.465211-0.561461-0.112292-1.10688-0.224584-1.660319-0.272709a18.431952 18.431952 0 0 0-2.205739-0.168438c-0.336876-0.016042-0.673753-0.064167-1.01865-0.096251H228.201681a25.706878 25.706878 0 0 0-25.714899 25.714899 25.706878 25.706878 0 0 0 25.714899 25.72292h108.201493L167.972992 825.026358a25.602607 25.602607 0 0 0-7.074404 23.092075 25.658753 25.658753 0 0 0 25.249688 20.82217 25.594586 25.594586 0 0 0 18.199347-7.523573l-0.008021-0.016041 168.41414-168.422161v108.193472a25.72292 25.72292 0 0 0 43.922267 18.199347c4.668144-4.668144 7.539615-11.084838 7.539614-18.199347l-0.00802-170.283002c0-0.360939-0.080209-0.705836-0.080209-1.074796a20.212584 20.212584 0 0 0-0.497294-3.890121z"></path> -->
            <path v-if="isFullScreen" style="transform:scale(0.7);transform-origin:center" d="M586.150814 439.854866V108.3538h51.79669v243.030106L921.795247 67.538209l36.672224 36.672224-283.845697 283.847744h243.030106v51.796689H586.150814z m-481.918891 518.591116l283.847743-283.84672v243.030105h51.79669v-331.500043H108.37529v51.79669h243.030105L67.559699 921.773757l36.672224 36.672225z m15.124465-839.111083h312.856428V67.538209H67.559699v364.653117h51.796689V119.334899z m787.314393 787.314393H593.814354v51.79669h364.653117V593.792864h-51.79669v312.856428z m0 0"></path>
            <path v-else d="M335.127273 335.127273v358.4h358.4V335.127273H335.127273z m0-32.581818h358.4c18.618182 0 27.927273 13.963636 27.927272 27.927272v358.4c0 18.618182-13.963636 27.927273-27.927272 27.927273H335.127273c-18.618182 0-27.927273-13.963636-27.927273-27.927273V335.127273c-4.654545-18.618182 9.309091-32.581818 27.927273-32.581818zM200.145455 344.436364c-9.309091 0-13.963636-4.654545-13.963637-13.963637V200.145455c0-9.309091 4.654545-13.963636 13.963637-13.963637h130.327272c9.309091 0 13.963636 9.309091 9.309091 18.618182 0 4.654545-4.654545 9.309091-9.309091 9.309091H214.109091v116.363636c0 9.309091-9.309091 13.963636-13.963636 13.963637zM330.472727 837.818182H200.145455c-9.309091 0-13.963636-4.654545-13.963637-13.963637v-130.327272c-4.654545-9.309091 4.654545-18.618182 9.309091-18.618182s18.618182 4.654545 18.618182 9.309091v125.672727h116.363636c9.309091 4.654545 13.963636 9.309091 9.309091 18.618182 0 4.654545-4.654545 4.654545-9.309091 9.309091z m493.381818 0h-130.327272c-9.309091 4.654545-18.618182-4.654545-18.618182-9.309091s4.654545-18.618182 9.309091-18.618182h125.672727v-116.363636c-4.654545-9.309091 4.654545-18.618182 9.309091-18.618182s18.618182 4.654545 18.618182 9.309091v139.636363c0 9.309091-9.309091 13.963636-13.963637 13.963637z m0-493.381818c-9.309091 0-13.963636-4.654545-13.963636-13.963637V214.109091h-116.363636c-9.309091 4.654545-18.618182-4.654545-18.618182-9.309091s0-18.618182 9.309091-18.618182h139.636363c9.309091 0 13.963636 4.654545 18.618182 13.963637v130.327272c-4.654545 9.309091-9.309091 13.963636-18.618182 13.963637z"></path>
          </svg>
        </div>
      </div>
    </transition>

    <transition name="fade">
      <div id="Navigator-mask" @click="open=false" v-if="open"></div>
    </transition>
    <transition name="menu" @after-enter="onAfterEnter">
      <div id="Navigator-menu" v-if="open">
        <div class="title">设置</div>
        <div class="menu-contains">
          <set-block title="机械臂" @active="onActive(1)" :active="focus==1">
            <set-slider v-for="(servo,index) in ServoValue" :key="index" :name="servo.name" v-model="$store.state.servo[index]" />
          </set-block>
          <set-block title="传输流" @active="onActive(2)" :active="focus==2">
            <div class="single-input">
              <span>视频流</span>
              <input v-model="$store.state.stream.video" class="msinput" placeholder="/5002" />
              <span style="opacity:0" class="state-span">&nbsp;</span>
            </div>            
            <div class="single-input">
              <span>指令流</span>
              <input v-model="$store.state.stream.command" class="msinput" placeholder="/">
              <span class="state-span">{{ $store.state._connectState }}</span>
            </div>
          </set-block>
          <set-block title="窗口" @active="onActive(3)" :active="focus==3">
            <label class="viewbox" v-for="(item,index) in viewbox" :key="index">
              <div class="viewtitle">{{ item }}</div>
              <input type="checkbox" v-model="$store.state.viewbox[index]">
            </label>
          </set-block>
          <set-block title="保存" @active="onActive(4)" :active="focus==4">
            <div class="align-center">
              <h4>
                <small>确定要将设置保存到下位机？</small>
              </h4>
              <h6>(实时设置保存在localStorage)</h6>
              <div class="set-button" @click="onSave">{{ saveBtn }}</div>
            </div>
          </set-block>
          <set-block title="刷新设置" @active="onActive(5)" :active="focus==5">
            <div class="align-center">
              <h4>
                <small>获取来自下位机的设置</small>
              </h4>
              <div class="set-button" @click="onRefreshNode">{{ getFromNodeBtn }}</div>
              <h4>
                <small>重置到Storage设置</small>
              </h4>
              <div class="set-button" @click="onRefreshStorage">{{ getFromStorageBtn }}</div>
              <h4>
                <small>重置到Default设置</small>
              </h4>
              <div class="set-button" @click="onRefreshDefault">{{ getFromDefaultBtn }}</div>
            </div>
          </set-block>
          <set-block title="关于" @active="onActive(6)" :active="focus==6">
            <div class="align-center">
              <svg class="aboutlogo icon" viewBox="0 0 1024 1024">
                <path d="M993.298,484.214c-8.399-5.952-17.349-8.588-26.362-8.942c2.615-1.962,4.08-3.121,4.08-3.121  c62.504-122.815-18.642-189.706-47.154-211.637c-28.51-21.931,10.967-42.766,10.967-42.766s-17.546-44.959-76.76-30.704  c-11.318,2.725-19.895,7.663-26.393,13.853c-8.711-54.265-76.969-104.988-128.035-118.025  c-51.537-13.159-36.744-61.958-36.744-61.958c-98.691-36.187-110.982,63.467-110.982,63.467  c-31.236,7.643-34.976,37.566-33.895,52.169c2.658,35.887,35.778,45.013,35.778,45.014c7.675,66.89,78.937,62.501,78.937,62.501  c-3.865-0.87,14.544-32.753,16.966-35.46c12.243-13.686,38.229-16.431,55.526-14.736c18.522,1.817,36.648,11.332,48.437,25.783  c23.551,28.857,9.91,67.19-5.21,96.669c-7.757,15.127-17.406,30.414-29.074,42.885c-31.802,33.994-54.465,64.697-124.28,50.441  c0,0,96.253,25.207,157.99-45.561c-1.264,2.089-2.626,3.807-4.104,4.989c9.92-7.936,20.554-20.328,30.351-33.737  c-2.56,31.766,20.999,49.089,20.999,49.089c5.485,58.118,54.812,44.959,54.812,44.959c-1.102-0.629-2.092-1.395-3-2.252  c-4.558-8.703,2.312-39.635,24.528-35.136c15.751,3.186,16.802,22.105,14.684,34.936c-2.938,17.778-12.772,29.342-25.009,41.975  c-29.931,30.896-73.047,47.923-115.052,53.812c-17.973,2.524-36.142,2.542-54.202,1.009c-18.393-1.564-49.302-1.243-65.631-9.909  c0.033,0.018,43.309,22.967,110.069,27.145c-26.192,7.275-53.255,12.678-81.093,15.939c-59.759,7-118.361,3.809-174.074-8.204  c-6.82-1.471-11.908-7.214-12.552-14.16c-0.819-8.866,0.079-17.881,3.315-26.826c30.7-84.875,0.851-343.564-29.663-411.975  c-2.586,9.519-7.789,73.89-21.281,139.118c40.28,134.666,21.952,214.804,32.854,297.112c3.323,25.088,19.439,35.222,36.833,37.007  c103.628,10.635,286.316-1.785,286.316-1.785s-169.881,21.183-288.798,6.23c-13.494-1.697-36.952-11.872-38.836-41.785  c-1.092-17.344-10.945-149.848-38.498-254.333c-9.935,35.974-22.982,68.346-40.193,87.113  c34.664,87.184,65.351,168.904,76.531,188.819c7.975,14.205,18.359,23.925,46.52,28.909c28.161,4.984,273.638,34.392,273.638,34.392  s-256.624-25.863-287.261-31.733c-14.628-2.803-26.407-11.065-37.548-25.586c-17.004-22.163-58.7-97.733-99.361-178.064  c-18.909,4.532-41.479,0.527-64.509-7.873c54.722,74.624,137.403,180.282,155.064,195.905c8.639,7.643,23.947,20.397,46.852,24.589  c14.433,2.642,71.762,15.526,130.411,28.889c0.487,2.075,0.985,4.074,1.496,6.015c-63.719-12.65-128.642-26.466-147.746-33.739  c-16.728-6.369-26.112-11.3-38.822-23.013c-13.889-12.799-131.724-140.039-188.143-217.404  c-46.163-24.987-86.129-58.037-91.82-62.816c26.44,48.064,57.748,92.841,93.175,133.784  c76.535,88.437,172.322,158.927,279.946,205.614c36.689,15.916,74.762,29.046,113.909,39.194c1.195,1.496,2.433,3.006,3.769,4.553  c22.04,25.549,52.833,49.883,86.99,67.027c-12.945-3.866-29.683-8.938-36.826-16.422c11.492,12.04,23.683,21.944,36.021,30.109  c-33.264,4.637-55.648,35.685-55.648,35.685c-61.406-1.096-46.054,58.118-46.054,58.118c58.118,0,47.15,24.123,47.15,24.123  c-10.964,31.8-53.729,3.291-53.729,3.291c-61.408-50.441-73.472-173.259-73.472-173.259c0.386,32.622,6.667,65.604,12.627,97.953  c0.445,5.628,1.633,12.404,3.121,19.093l-0.051-0.129c-17.687,3.034-35.87,4.615-54.422,4.615  c-176.514,0-319.607-143.093-319.607-319.607c0-23.285,2.516-45.98,7.246-67.849L0,445.458V592.79l100.657,5.515  c4.418,19.194,10.581,38.936,18.37,58.85L41.39,707.989l73.843,127.736l88.073-44.549c14.122,15.222,29.466,29.489,45.733,42.532  l-41.325,81.678l127.754,73.756l53.208-81.439c19.169,5.709,38.915,9.227,61.686,12.381l4.977,88.495h147.495l4.814-85.727  c9.431,12.709,21.259,23.26,36.779,29.864c62.868,26.755,122.51-10.662,165.852-54.002c24.127-24.125,59.218-14.256,59.218-14.256  c17.287-51.396,6.298-77.697-12.003-90.969c1.312-0.013,2.021-0.045,2.021-0.045c125.008-28.51,126.105-180.934,127.201-219.313  c1.096-38.381,37.283-28.51,37.283-28.51C1024,511.628,999.98,488.948,993.298,484.214z M620.331,622.694  c71.504,16.292,144.924,33.285,144.924,33.285s-69.904-12.695-141.874-26.965C622.104,626.567,621.039,624.362,620.331,622.694z   M859.388,716.371c-16.715,11.186-48.319,14.057-67.785,13c-23.054-1.252-45.158-9.311-65.849-19.104  c-22.579-10.686-40.278-20.859-57.28-33.645c66.477,14.771,135.81,20.966,206.619,17.461  C873.527,703.018,866.047,711.916,859.388,716.371z" />
              </svg>
              <h3>BM Controller</h3>
              <h3>北冥Web控制系统</h3>
              <h3>
                <small>版本1.0.0</small>
              </h3>
            </div>
          </set-block>
        </div>
      </div>
    </transition>
    <svg class="logo icon" :class="{barShow}" viewBox="0 0 1024 1024" @click="onIconClick">
      <path d="M993.298,484.214c-8.399-5.952-17.349-8.588-26.362-8.942c2.615-1.962,4.08-3.121,4.08-3.121  c62.504-122.815-18.642-189.706-47.154-211.637c-28.51-21.931,10.967-42.766,10.967-42.766s-17.546-44.959-76.76-30.704  c-11.318,2.725-19.895,7.663-26.393,13.853c-8.711-54.265-76.969-104.988-128.035-118.025  c-51.537-13.159-36.744-61.958-36.744-61.958c-98.691-36.187-110.982,63.467-110.982,63.467  c-31.236,7.643-34.976,37.566-33.895,52.169c2.658,35.887,35.778,45.013,35.778,45.014c7.675,66.89,78.937,62.501,78.937,62.501  c-3.865-0.87,14.544-32.753,16.966-35.46c12.243-13.686,38.229-16.431,55.526-14.736c18.522,1.817,36.648,11.332,48.437,25.783  c23.551,28.857,9.91,67.19-5.21,96.669c-7.757,15.127-17.406,30.414-29.074,42.885c-31.802,33.994-54.465,64.697-124.28,50.441  c0,0,96.253,25.207,157.99-45.561c-1.264,2.089-2.626,3.807-4.104,4.989c9.92-7.936,20.554-20.328,30.351-33.737  c-2.56,31.766,20.999,49.089,20.999,49.089c5.485,58.118,54.812,44.959,54.812,44.959c-1.102-0.629-2.092-1.395-3-2.252  c-4.558-8.703,2.312-39.635,24.528-35.136c15.751,3.186,16.802,22.105,14.684,34.936c-2.938,17.778-12.772,29.342-25.009,41.975  c-29.931,30.896-73.047,47.923-115.052,53.812c-17.973,2.524-36.142,2.542-54.202,1.009c-18.393-1.564-49.302-1.243-65.631-9.909  c0.033,0.018,43.309,22.967,110.069,27.145c-26.192,7.275-53.255,12.678-81.093,15.939c-59.759,7-118.361,3.809-174.074-8.204  c-6.82-1.471-11.908-7.214-12.552-14.16c-0.819-8.866,0.079-17.881,3.315-26.826c30.7-84.875,0.851-343.564-29.663-411.975  c-2.586,9.519-7.789,73.89-21.281,139.118c40.28,134.666,21.952,214.804,32.854,297.112c3.323,25.088,19.439,35.222,36.833,37.007  c103.628,10.635,286.316-1.785,286.316-1.785s-169.881,21.183-288.798,6.23c-13.494-1.697-36.952-11.872-38.836-41.785  c-1.092-17.344-10.945-149.848-38.498-254.333c-9.935,35.974-22.982,68.346-40.193,87.113  c34.664,87.184,65.351,168.904,76.531,188.819c7.975,14.205,18.359,23.925,46.52,28.909c28.161,4.984,273.638,34.392,273.638,34.392  s-256.624-25.863-287.261-31.733c-14.628-2.803-26.407-11.065-37.548-25.586c-17.004-22.163-58.7-97.733-99.361-178.064  c-18.909,4.532-41.479,0.527-64.509-7.873c54.722,74.624,137.403,180.282,155.064,195.905c8.639,7.643,23.947,20.397,46.852,24.589  c14.433,2.642,71.762,15.526,130.411,28.889c0.487,2.075,0.985,4.074,1.496,6.015c-63.719-12.65-128.642-26.466-147.746-33.739  c-16.728-6.369-26.112-11.3-38.822-23.013c-13.889-12.799-131.724-140.039-188.143-217.404  c-46.163-24.987-86.129-58.037-91.82-62.816c26.44,48.064,57.748,92.841,93.175,133.784  c76.535,88.437,172.322,158.927,279.946,205.614c36.689,15.916,74.762,29.046,113.909,39.194c1.195,1.496,2.433,3.006,3.769,4.553  c22.04,25.549,52.833,49.883,86.99,67.027c-12.945-3.866-29.683-8.938-36.826-16.422c11.492,12.04,23.683,21.944,36.021,30.109  c-33.264,4.637-55.648,35.685-55.648,35.685c-61.406-1.096-46.054,58.118-46.054,58.118c58.118,0,47.15,24.123,47.15,24.123  c-10.964,31.8-53.729,3.291-53.729,3.291c-61.408-50.441-73.472-173.259-73.472-173.259c0.386,32.622,6.667,65.604,12.627,97.953  c0.445,5.628,1.633,12.404,3.121,19.093l-0.051-0.129c-17.687,3.034-35.87,4.615-54.422,4.615  c-176.514,0-319.607-143.093-319.607-319.607c0-23.285,2.516-45.98,7.246-67.849L0,445.458V592.79l100.657,5.515  c4.418,19.194,10.581,38.936,18.37,58.85L41.39,707.989l73.843,127.736l88.073-44.549c14.122,15.222,29.466,29.489,45.733,42.532  l-41.325,81.678l127.754,73.756l53.208-81.439c19.169,5.709,38.915,9.227,61.686,12.381l4.977,88.495h147.495l4.814-85.727  c9.431,12.709,21.259,23.26,36.779,29.864c62.868,26.755,122.51-10.662,165.852-54.002c24.127-24.125,59.218-14.256,59.218-14.256  c17.287-51.396,6.298-77.697-12.003-90.969c1.312-0.013,2.021-0.045,2.021-0.045c125.008-28.51,126.105-180.934,127.201-219.313  c1.096-38.381,37.283-28.51,37.283-28.51C1024,511.628,999.98,488.948,993.298,484.214z M620.331,622.694  c71.504,16.292,144.924,33.285,144.924,33.285s-69.904-12.695-141.874-26.965C622.104,626.567,621.039,624.362,620.331,622.694z   M859.388,716.371c-16.715,11.186-48.319,14.057-67.785,13c-23.054-1.252-45.158-9.311-65.849-19.104  c-22.579-10.686-40.278-20.859-57.28-33.645c66.477,14.771,135.81,20.966,206.619,17.461  C873.527,703.018,866.047,711.916,859.388,716.371z" />
    </svg>
  </div>
</template>

<script>
import setSlider from "./setSlider";
import setBlock from "./setBlock";
import { DispatchHTMLEvent } from "@/classes/util";

const settingConfig = {
  saveBtn: {
    default: "保存",
    ing: "保存中……",
    success: "保存成功！",
    failed: "保存出错"
  },
  getFromNodeBtn: {
    default: "从下位机获取",
    ing: "获取中",
    success: "获取成功",
    failed: "获取出错！"
  },
  getFromStorageBtn: {
    default: "从Storage获取",
    success: "获取成功",
    failed: "获取出错！"
  },
  getFromDefaultBtn: {
    default: "重置到默认",
    success: "重置成功",
    failed: "重置出错！"
  },
  delay: 3000
};

const fullScreenChangedEvent = [
  "fullscreenchange",
  "mozfullscreenchange",
  "webkitfullscreenchange",
  "msfullscreenchange"
];

export default {
  data() {
    return {
      ServoValue: [{ name: "左手" }, { name: "左关" }, { name: "左臂" }],
      value: [10, 20],
      focus: 0,
      open: false,
      barShow: true,
      viewbox: [
        "陀螺仪/罗盘",
        "机械臂/履带",
        "温深震传感器",
        "主控板",
        "视频流"
      ],
      isFullScreen: false,
      saveBtn: settingConfig.saveBtn.default,
      getFromNodeBtn: settingConfig.getFromNodeBtn.default,
      getFromStorageBtn: settingConfig.getFromStorageBtn.default,
      getFromDefaultBtn: settingConfig.getFromDefaultBtn.default
    };
  },
  components: {
    setSlider,
    setBlock
  },
  methods: {
    onActive(index) {
      if (this.focus == index) this.focus = 0;
      else this.focus = index;
    },
    onAfterEnter() {
      DispatchHTMLEvent("resize", window);
    },
    onFullTiggle() {
      if (this.isFullScreen) {
        let apilist = [
          "exitFullscreen",
          "msCancelFullscreen",
          "webkitExitFullscreen",
          "mozCancelFullscreen"
        ];
        for (let i in apilist) {
          if (document[apilist[i]] instanceof Function) document[apilist[i]]();
        }
      } else {
        let apilist = [
          "requestFullscreen",
          "msRequestFullscreen",
          "webkitRequestFullScreen",
          "mozRequestFullScreen"
        ];
        for (let i in apilist) {
          if (document.body[apilist[i]] instanceof Function)
            document.body[apilist[i]]();
        }
      }
    },
    onIconClick() {
      this.open = !this.open;
      this.barShow = true;
    },
    onFullScreen(e) {
      this.isFullScreen = !this.isFullScreen;
    },
    async onSave() {
      if (this.saveBtn !== settingConfig.saveBtn.default) return;
      this.saveBtn = settingConfig.saveBtn.ing;
      try {
        let success = await this.$store.dispatch("saveConfig");
        if (success) {
          this.saveBtn = settingConfig.saveBtn.success;
        }
      } catch (e) {
        console.log(e);
        this.saveBtn = settingConfig.saveBtn.failed;
      }
      setTimeout(() => {
        this.saveBtn = settingConfig.saveBtn.default;
      }, settingConfig.delay);
    },
    async onRefreshNode() {
      if (this.getFromNodeBtn !== settingConfig.getFromNodeBtn.default) return;
      this.getFromNodeBtn = settingConfig.getFromNodeBtn.ing;
      try {
        let success = await this.$store.dispatch("refreshStore");
        if (success) {
          this.getFromNodeBtn = settingConfig.getFromNodeBtn.success;
        }
      } catch (e) {
        console.log(e);
        this.getFromNodeBtn = settingConfig.getFromNodeBtn.failed;
      }
      setTimeout(() => {
        this.getFromNodeBtn = settingConfig.getFromNodeBtn.default;
      }, settingConfig.delay);
    },
    async onRefreshStorage() {
      if (this.getFromStorageBtn !== settingConfig.getFromStorageBtn.default)
        return;
      if (this.$store.dispatch("initFromStorage")) {
        this.getFromStorageBtn = settingConfig.getFromStorageBtn.success;
      } else {
        this.getFromStorageBtn = settingConfig.getFromStorageBtn.failed;
      }
      setTimeout(() => {
        this.getFromStorageBtn = settingConfig.getFromStorageBtn.default;
      }, settingConfig.delay);
    },
    async onRefreshDefault() {
      if (this.getFromDefaultBtn !== settingConfig.getFromDefaultBtn.default)
        return;
      if (this.$store.dispatch("initFromStorage", true)) {
        this.getFromDefaultBtn = settingConfig.getFromDefaultBtn.success;
      } else {
        this.getFromDefaultBtn = settingConfig.getFromDefaultBtn.failed;
      }
      setTimeout(() => {
        this.getFromDefaultBtn = settingConfig.getFromDefaultBtn.default;
      }, settingConfig.delay);
    }
  },
  mounted() {
    fullScreenChangedEvent.forEach(name => {
      document.addEventListener(name, this.onFullScreen);
    });
  },
  destroyed() {
    fullScreenChangedEvent.forEach(name => {
      document.removeEventListener(name, this.onFullScreen);
    });
  }
};
</script>
<style lang='scss'>
#Navigator {
  $barheight: 50px;
  z-index: 10001;
  #Navigator-bar {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: $barheight;
    background: rgba(28, 25, 39, 0.95);
    border-bottom: 1px solid rgba(238, 238, 238, 0.4);
    .nav-left {
      flex-grow: 2;
    }
    .nav-right {
      margin-right: 20px;
      .icon {
        color: white;
        width: $barheight * 0.8;
        height: $barheight * 0.8;
        padding: $barheight * 0.1;
        transition: background-color 0.4s ease-in-out;
        &:hover {
          background: #00c1de;
        }
      }
    }
    .title {
      color: white;
      padding-left: 70px;
    }
  }
  #Navigator-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.63);
    transition: opacity 0.4s ease-in-out;
  }
  #Navigator-menu {
    &.menu-enter-to,
    &.menu-leave {
      transform: translate(0, 0);
    }
    &.menu-leave-to,
    &.menu-enter {
      transform: translate(-100%, 0);
    }
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(28, 25, 39, 0.93);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.28);
    width: 250px;
    transition: all ease-in-out 0.4s;
    .title {
      background: rgba(0, 0, 0, 0.5);
      padding: 1rem;
      padding-left: 70px;
      color: white;
      margin-bottom: 1rem;
      font-size: 0.9rem;
    }
    .single-input {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 10px;
      > input {
        width: 80%;
        padding: 5px 10px;
      }
      > span {
        color: white;
        align-self: flex-start;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 1.2rem;
        font-size: 0.8rem;
        &.state-span {
          align-self: flex-end;
          background: #00c1de;
          padding: 1px 3px;
          border-radius: 3px;
          font-size: 0.6rem;
          margin-right: 1.2rem;
          margin-top: 0;
        }
      }
    }
    .set-button {
      color: white;
      padding: 0.5rem;
      background: #8f8f8f;
      margin: 1.2rem;
      font-size: 0.8rem;
      text-align: center;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      transition: background-color ease-in-out 0.4s, transform ease-in-out 0.1s;
      &:hover,
      &:active {
        background: #afafaf;
      }
      &:active {
        transform: scale(0.95);
      }
    }
    .menu-contains {
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 0px;
      }
      .viewbox {
        display: flex;
        justify-content: space-between;
        padding: 0.6rem 1.2rem;
        color: white;
        font-size: 0.8rem;
        transition: background-color 0.4s ease-in-out;
        &:hover {
          background: rgba(255, 255, 255, 0.3);
        }
      }
      .align-center {
        text-align: center;
        color: white;
        h3,
        h4,
        h5,
        h6 {
          font-weight: lighter;
          margin: 0.6rem 0;
          small {
            color: #c2c2c2;
          }
        }
        .table {
          color: gray;
        }
      }
    }
  }
  .logo {
    position: fixed;
    left: 0;
    top: 0;
    height: $barheight * 0.6;
    width: auto;
    padding: $barheight * 0.2;
    margin-right: 1rem;
    transition: all 0.4s ease-in-out;
    z-index: 1000000;
    background: gray;
    border-radius: $barheight / 2;
    color: white;
    &.barShow {
      background: transparent;
      border-radius: 0;
    }
    &:hover {
      background: #00c1de;
    }
  }
  .aboutlogo {
    margin-left: 12%;
    margin-right: 12%;
    margin-top: 5%;
    color: white;
  }
}
</style>